<template>
  <el-dialog title="代理统计" :visible.sync="visible" width="1200px" top="5vh" append-to-body>
    <div class="dashboard-editor-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            平台总用户
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.total_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            今日注册人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            总能量金额（trx）
            <div>
              <i class="el-icon-coin" style="color: orange"></i>
              <span>{{ data.total_energy_trx_amount }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--块类统计-->
      <el-row :gutter="20">

        <el-col :span="3">
          <el-card class="box-card">
            总充提差额
            <div>
              <i class="el-icon-coin" style="color: orange"></i>
              <span>{{ data.total_deposit_withdraw_differ_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总充值金额
            <div>
              <i class="el-icon-coin" style="color: red"></i>
              <span>{{ data.total_deposit_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总提现金额
            <div>
              <i class="el-icon-coin" style="color: green"></i>
              <span>{{ data.total_withdraw_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总充值笔数
            <div>
              <i class="el-icon-star-on" style="color: red"></i>
              <span>{{ data.total_deposit_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总充值人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.total_deposit_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总提现笔数
            <div>
              <i class="el-icon-star-on" style="color: green"></i>
              <span>{{ data.total_withdraw_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总提现人数
            <div>
              <i class="el-icon-user-solid" style="color: green"></i>
              <span>{{ data.total_withdraw_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总赠送金额
            <div>
              <i class="el-icon-coin" style="color: green"></i>
              <span>{{ data.total_give_amount }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="3">
          <el-card class="box-card">
            总赠送笔数
            <div>
              <i class="el-icon-star-on" style="color: green"></i>
              <span>{{ data.total_give_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总赠送人数
            <div>
              <i class="el-icon-user-solid" style="color: green"></i>
              <span>{{ data.total_give_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总量化金额
            <div>
              <i class="el-icon-coin" style="color: red"></i>
              <span>{{ data.total_quantification_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总量化笔数
            <div>
              <i class="el-icon-star-on" style="color: red"></i>
              <span>{{ data.total_quantification_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总量化人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.total_quantification_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总投资金额
            <div>
              <i class="el-icon-coin" style="color: red"></i>
              <span>{{ data.total_project_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总投资笔数
            <div>
              <i class="el-icon-star-on" style="color: red"></i>
              <span>{{ data.total_project_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            总投资人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.total_project_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <el-card class="box-card">
            当月充提差额
            <div>
              <i class="el-icon-coin" style="color: orange"></i>
              <span>{{ data.month_deposit_withdraw_differ_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月充值
            <div>
              <i class="el-icon-coin" style="color: red"></i>
              <span>{{ data.month_deposit_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月提现
            <div>
              <i class="el-icon-coin" style="color: green"></i>
              <span>{{ data.month_withdraw_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月充值笔数
            <div>
              <i class="el-icon-star-on" style="color: red"></i>
              <span>{{ data.month_deposit_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月充值人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.month_deposit_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月提现笔数
            <div>
              <i class="el-icon-star-on" style="color: green"></i>
              <span>{{ data.month_withdraw_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当月提现人数
            <div>
              <i class="el-icon-user-solid" style="color: green"></i>
              <span>{{ data.month_withdraw_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <el-card class="box-card">
            当天充提差额
            <div>
              <i class="el-icon-coin" style="color: orange"></i>
              <span>{{ data.today_deposit_withdraw_differ_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天充值
            <div>
              <i class="el-icon-coin" style="color: red"></i>
              <span>{{ data.today_deposit_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天提现
            <div>
              <i class="el-icon-coin" style="color: green"></i>
              <span>{{ data.today_withdraw_amount }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天充值笔数
            <div>
              <i class="el-icon-star-on" style="color: red"></i>
              <span>{{ data.today_deposit_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天充值人数
            <div>
              <i class="el-icon-user-solid" style="color: red"></i>
              <span>{{ data.today_deposit_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天提现笔数
            <div>
              <i class="el-icon-star-on" style="color: green"></i>
              <span>{{ data.today_withdraw_count }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="3">
          <el-card class="box-card">
            当天提现人数
            <div>
              <i class="el-icon-user-solid" style="color: green"></i>
              <span>{{ data.today_withdraw_customer_number }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>

import {getStatistics} from "@/api/dashboard/dashboard";

export default {
  name: 'Index',
  props: {
    app_id: {
      type: [Number, String]
    },
  },
  data() {
    return {
      // 遮罩层
      visible: false,
      data: {
        total_customer_number: '',
        customer_number: '',
        total_withdraw_amount: '',
        total_deposit_amount: '',
        month_withdraw_amount: '',
        month_deposit_amount: '',
        today_withdraw_amount: '',
        today_deposit_amount: '',
      },
    }
  },
  created() {
    this.getGroupApp()
  },
  methods: {
    // 显示弹框
    show(id) {
      getStatistics(this.app_id, id).then(response => {
        this.data = response.data
      })
      this.visible = true;
    },
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 10px;
  text-align: center;
}

.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
